<template>
	<view class="payment_state">
		<view class="state" v-if="type==0">
			<view class="status">
				<image src="@/static/images/s1.png"></image>
				<text>{{data_info.status_name}}</text>
			</view>
			<view class="other">
				<view class="key">需付款：</view>
				<view class="price">
					<view class="unit">￥</view>
					<view class="value">{{data_info.total}}</view>
				</view>
				<view class="time">
					<text>剩余：</text>
					<text>{{date_text}}</text>
				</view>
			</view>
			<view class="btn" @click="goPay">去支付</view>
		</view>

		<view class="state normal" v-else>
			<view class="status">
				<image src="@/static/images/s2.png"></image>
				<text>{{data_info.status_name}}</text>
			</view>
		</view>

		<view class="address">
			<!-- <view class="logistics_status" @click="router('/pages/my/logistics')">
				<view class="left">
					<image src="@/static/images/m22.png"></image>
					<text>仓库处理中</text>
				</view>
				<image src="@/static/images/r2.png"></image>
			</view>
			<view class="logistics">
				<text>您的订单已拣货完成，待出库交付顺丰快递，运单号为</text>
				<text class="order_no">SF1242524312</text>
			</view>
			<view class="cell_status">
				<view class="key">退款原因</view>
				<view class="value">退运费</view>
			</view>
			<view class="cell_status">
				<view class="key">退回原支付路径</view>
				<view class="price">
					<view class="unit">￥</view>
					<view class="value">3599.00</view>
				</view>
			</view> -->

			<view class="user_info">
				<image src="@/static/images/m20.png"></image>
				<view class="name">{{region.name}}</view>
				<view class="phone">{{region.phone}}</view>
			</view>
			<view class="address_deta">地址：{{region.region_text}}</view>
		</view>
	</view>
</template>

<script setup>
	import useBase from "@/hooks/useBase.js";
	const {
		router
	} = useBase();
	import {
		ref,
		watch,
		onUnmounted
	} from "vue";
	const props = defineProps({
		data_info: Object
	});
	const emit = defineEmits(["data_end", "goPay"]);
	const type = ref("");
	const data_info = ref({
		status_name: "",
		order_no: "",
		freight: 0.00,
		created_at: "",
		total: "",
	});
	const status_name = ref("");
	const time = ref("");

	const region = ref({
		name: "",
		phone: "",
		region_text: "",
	});
	watch(() => props.data_info, data => {
		type.value = data.status;
		data_info.value = data;
		let {
			full_address,
			name,
			phone
		} = data.address;
		region.value.region_text = full_address;
		region.value.name = name;
		region.value.phone = phone;
		if (data.status == 0) {
			handerTime();
		}
	});
	const date_text = ref("");

	let timer;
	const handerTime = () => {
		let date = data_info.value.end_pay_time;
		if (date == 0) return;
		let current = parseInt(new Date().getTime() / 1000);
		if (current >= date) {
			date_text.value = "00分00秒";
			clearTimeout(timer);
			timer = setTimeout(() => emit("data_end"), 5 * 1000);
		} else {
			let surplus = date - current;
			let mm = parseInt(surplus / 60 % 60);
			mm = mm < 10 ? '0' + mm : mm;
			let ss = parseInt(surplus % 60);
			ss = ss < 10 ? '0' + ss : ss;
			date_text.value = `${mm}分${ss}秒`;
			timer = setTimeout(handerTime, 1000);
		}
	};
	const goPay = () => emit("goPay");
	onUnmounted(() => clearTimeout(timer));
</script>

<style scoped lang="scss">
	.payment_state {
		padding-bottom: 18rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;

		.state {
			&.normal {
				.status {
					text {
						color: #222222;
					}
				}
			}

			.status {
				display: flex;
				justify-content: center;
				align-items: center;

				image {
					width: 40rpx;
					height: 40rpx;
				}

				text {
					color: #CA1C1D;
					font-size: 40rpx;
					font-weight: bold;
					padding-left: 16rpx;
					box-sizing: border-box;
				}
			}

			.other {
				padding: 43rpx 0;
				box-sizing: border-box;
				display: flex;
				justify-content: center;
				align-items: center;

				.key {
					color: #222222;
					font-size: 28rpx;
					font-weight: bold;
				}

				.price {
					display: flex;
					align-items: center;

					.unit {
						color: #222222;
						font-size: 28rpx;
						font-weight: bold;
					}

					.value {
						color: #222222;
						font-size: 36rpx;
						font-weight: bold;
						padding-left: 24rpx;
						padding-right: 18rpx;
						box-sizing: border-box;
					}
				}

				.time {
					color: #222222;
					font-size: 28rpx;
					font-weight: bold;
					padding-left: 16rpx;
					box-sizing: border-box;
					display: flex;
				}
			}

			.btn {
				width: 212rpx;
				height: 72rpx;
				line-height: 72rpx;
				text-align: center;
				color: #FFFFFF;
				font-size: 28rpx;
				font-weight: bold;
				border-radius: 10rpx;
				margin: 0 auto;
				background: #CA1C1D;
			}
		}

		.address {
			margin-top: 20rpx;
			border-radius: 24rpx;
			padding: 45rpx 42rpx 50rpx 22rpx;
			box-sizing: border-box;
			background: #FFFFFF;

			.logistics_status {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.left {
					display: flex;
					align-items: center;

					image {
						width: 30rpx;
						height: 30rpx;
					}

					text {
						color: #222222;
						font-size: 28rpx;
						font-weight: bold;
					}
				}

				image {
					width: 40rpx;
					height: 40rpx;
				}
			}

			.logistics {
				line-height: 36rpx;
				color: #666666;
				font-size: 24rpx;
				padding: 30rpx 122rpx 30rpx 0;
				box-sizing: border-box;

				.order_no {
					color: #5E8EEE;
				}
			}

			.cell_status {
				padding: 16rpx 0;
				box-sizing: border-box;
				display: flex;
				justify-content: space-between;

				.key {
					color: #222222;
					font-size: 28rpx;
				}

				.value {
					color: #272727;
					font-size: 22rpx;
					font-weight: bold;
				}

				.price {
					display: flex;
					align-items: center;

					.unit {
						color: #272727;
						font-size: 22rpx;
						font-weight: bold;
					}

					.value {
						color: #272727;
						font-size: 30rpx;
						font-weight: bold;
					}
				}
			}

			.user_info {
				display: flex;
				align-items: center;

				image {
					width: 30rpx;
					height: 30rpx;
				}

				.name {
					color: #222222;
					font-size: 28rpx;
					font-weight: bold;
					padding-left: 14rpx;
					padding-right: 32rpx;
					box-sizing: border-box;
				}

				.phone {
					color: #222222;
					font-size: 24rpx;
					font-weight: bold;
				}
			}

			.address_deta {
				line-height: 36rpx;
				color: #666666;
				font-size: 24rpx;
				padding-top: 30rpx;
				box-sizing: border-box;
			}
		}
	}
</style>